<template>
  <a-card class="system__module">
    <BrowserHead />
    <IFrameVue />
  </a-card>
</template>

<script setup lang="ts">
import { getTempId } from '@/global/window/window';
import { useTimeout } from '@vueuse/core';
import { browserLoading } from './data/browser';
import { createBrowserTab, gotoBrowserHome } from './data/browser.methods';
import BrowserHead from './head/BrowserHead.vue';
import IFrameVue from './iframe/Iframe.vue';

type Props = {
  data?: { src: string; type?: 'link' | 'html' };
};
const props = defineProps<Props>();

watch(
  props,
  () => {
    if (props.data) {
      createBrowserTab({
        id: getTempId(),
        src: props.data.src,
        type: props.data.type || 'link',
      });
    } else {
      gotoBrowserHome();
    }
  },
  {
    deep: true,
    immediate: true,
  },
);

watch(browserLoading, () => {
  useTimeout(3000, {
    callback() {
      browserLoading.value = false;
    },
  });
});
</script>

<style lang="scss" scoped>
.system__module {
  & > :deep(.ant-card-body) {
    height: 100%;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 0;
  }
}

.disable {
  pointer-events: none;
}
</style>
